<template>
    <div class="wapper">
        <div class="header">
            <div class="title">商品(个)</div>
            <div class="number">1200</div>
            <div class="arrow flex-aic">
                <el-icon color="#509A80"><CaretTop /></el-icon>
                <span style="color: #509A80">26%</span>
                <span style=" color: #999999;">同比上周</span>
            </div>
        </div>
        <div class="canvas" ref="canvas"></div>
    </div>
</template>

<script setup>
import { ref, onMounted, nextTick} from 'vue';
import * as echarts from 'echarts';
const canvas = ref(null) // dom实例
let myChart = ref({}) // echarts实例
onMounted(() => {
    renderChart()
})

const renderChart = () => {
    myChart.value = echarts.init(canvas.value)
    myChart.value.setOption({
        grid: {
            left: '0%',
            bottom: '0%',
            containLabel: false
        },
        xAxis: {
            show: false,
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value',
            show: false,

        },
        series: [
            {
                data: [10, 20, 25, 9, 12, 30, 8, 10, 20, 25, 9, 12, 30, 8, 10, 20, 25, 9, 12, 30, 8, 10, 20, 25, 9, 12, 30, 8],
                type: 'line',
                smooth: true,
                symbol: 'none',
                areaStyle: {
                    color: '#DAEEFB', //填充色
                },
                lineStyle: {
                    color: '#69B8EF' //线条颜色
                }
            }
        ]
    });
}
window.addEventListener('resize', myChart.value.resize)
</script>

<style scoped lang="scss">
.wapper{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 18.75rem;
    padding: 0 1.25rem;

    .header{
        color: #333333;
        .title{
            font-size: 0.875rem;
            font-weight: 400;
        }
        .number{
            font-size: 1.25rem;
            font-weight: 500;
            margin: 0.625rem 0;
        }
        .arrow{
            span{
                margin-left: 0.625rem;
                font-size: 0.75rem;
                font-weight: 400;
            }
        }
    }
}
.canvas{
    flex: 1;
    height: 13.125rem;
}
</style>